<template>
  <view class="content">
    <u-sticky bgColor="#ffffff">
      <u-tabs
        :activeStyle="{
          color: '#C1282D',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        lineColor="#C1282D"
        style="width: 100%"
        :list="list1"
        @click="changeTab"
        :itemStyle="{ width: '40%', paddingBottom: '20rpx', height: '60rpx' }"
      ></u-tabs>
    </u-sticky>
    <view style="height: 30rpx"></view>
    <view class="top" v-if="tab == 0">
      <view class="max-text"> 预支金额 </view>
      <view class="gundong" style="margin: 20rpx 0 40rpx">
        <view
          v-for="item in moneyList"
          :key="item.id"
          :class="item.id == selectMoney.id ? 'adive' : 'price'"
          @click="tabMoney(item)"
          >{{ item.money }}</view
        >
      </view>
      <u-line></u-line>
      <view class="max-text" style="margin-top: 40rpx"> 预支原因 </view>
      <view style="margin: 40rpx 0">
        <textarea
          class="textArea"
          v-model="from.yu_why"
          placeholder="请输入内容"
        ></textarea>
      </view>
      <u-line></u-line>
      <view class="flexleft"  style="margin-top: 40rpx">
      		  <view class="max-text margin_right"> 添加考勤附件 </view>
      	<view class="xiaohong main_size" style="text-decoration: underline;" @click="jumpurl('/pages/tab4/jiezhism')">借支说明</view>
      </view>
      <view style="margin: 40rpx 0">
        <u-upload
          :fileList="imgList"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :maxCount="3"
        ></u-upload>
      </view>
      <u-line></u-line>
    </view>
    <view v-else>
      <view class="items" v-for="item in yuwageList" :key="item">
        <view class="lie">
          <view class="max-text">{{ item.create_time }}</view>
          <view class="text-color" style="font-size: 28rpx; font-weight: 600">
            {{ item.status_text }}
          </view>
        </view>
        <view class="min-text">预支金额(元):{{ item.money }}</view>
        <view class="min-text">预支原因：{{ item.yu_why }}</view>
        <view class="min-text">添加考勤附件</view>
        <view class="fujian">
          <view
            style="margin-right: 20rpx"
            v-for="items in strToArray(item.images)"
          >
            <u--image
              :showLoading="true"
              :src="pic + items"
              width="160rpx"
              height="160rpx"
            ></u--image>
          </view>
        </view>
        <u-line></u-line>
        <view class="z-text" style="margin: 30rpx 0" v-if="item.status == 2"
          >失败原因： {{ item.fail_why }}</view
        >
      </view>
      <u-empty
        v-if="yuwageList.length == 0"
        mode="list"
        icon="http://cdn.uviewui.com/uview/empty/list.png"
      />
    </view>
	<view class="flexcenter">
		<button v-if="tab == 0" @click="fabu" class="button fabu">提交</button>
	</view>
  </view>
</template>

<script>
export default {
  name: "tab-1",
  data() {
    return {
      API_URL: this.$API_URL,
      pic: this.$IMG_URL,
      fileList1: [],
      tab: "",
      value1: "ss",
      list1: [
        {
          name: "预支工资",
        },
        {
          name: "预支记录",
        },
      ],
      moneyList: [],
      selectMoney: {},
      from: {
        yu_why: "",
      },
      imgList: [],
      imgList_bendi: [],
      yuwageList: [],
    };
  },
  onLoad() {
    this.yuwageMoney();
  },
  methods: {

    tabMoney(item) {
      this.selectMoney = item;
    },
    // 获取预支金额列表
    yuwageMoney() {
      this.http.get("yuwage/money").then((res) => {
        this.moneyList = res.data;
        this.selectMoney = res.data[0];
      });
    },
    afterRead(event) {
      event.file.map((item) => {
        this.http.upfile("Common/upload", item.url).then((res) => {
          if (res.code == 1) {
            this.imgList.push({ url: res.data.fullurl });
            this.imgList_bendi.push(res.data.url);
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
      });
    },
    deletePic(event) {
      this.imgList.splice(event.index, 1);
      this.imgList_bendi.splice(event.index, 1);
    },
    fabu() {
      this.from = {
        yu_why: this.from.yu_why,
        yu_id: this.selectMoney.id,
        images: this.imgList_bendi.join(),
        money: this.selectMoney.money,
      };
      this.http
        .post("yuwage/add", this.from)
        .then((res) => {
          if (res.code == 1) {
            this.toast("上传成功");
            this.selectMoney = {};
            this.from.yu_why = "";
            this.imgList_bendi = [];
            this.imgList = [];
          } else {
            this.toast(res.msg);
          }
        })
        .catch((err) => {
          console.warn(err, "err");
        });
    },
    changeTab(e) {
      this.tab = e.index;
      this.yuwageIndex();
    },
    yuwageIndex() {
      this.http.get("yuwage/index").then((res) => {
        this.yuwageList = res.data;
        console.log(res.data);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  .gundong {
    overflow-x: scroll;
    white-space: nowrap;
  }
  .price {
    display: inline-block;
    padding: 5rpx 30rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
    border: 1rpx solid #b7b7b7;
    color: #b7b7b7;
  }
  .adive {
    background-color: #c1282d;
    border: 1rpx solid #c1282d;
    color: white;
    display: inline-block;
    padding: 5rpx 30rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
  }
}
.fabu {
  width: 80%;
  margin-top: 100rpx;
}
.items {
  padding: 20rpx;
  background: #ffffff;
  opacity: 1;
  margin: 0rpx 30rpx 30rpx;
  border-radius: 10rpx;
  align-items: center;
  .min-text {
    margin-bottom: 20rpx;
  }
  .fujian {
    height: 180rpx;
    border-radius: 20rpx;
    display: flex;
  }
  .lie {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .sex {
      font-size: 24rpx;
    }
  }
}
</style>